Code Playground

console.log("Event Fired")
import React, { Fragment, useEffect, useRef, useState } from 'https://esm.sh/react'
import ReactDOM from 'https://esm.sh/react-dom'

const Soup = ({
  baseLineOpacity,
  distortion,
  maxLineDistance,
  particleCount,
  particleSize,
  particleSpeed
}) => {
  let context

const points = []

const stage = useRef();

const checkDistance = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));

const genColor = () => Math.round(255 * Math.random())

const addPoint = (x, y) => points.push({
    x,
    y,
    dx: - particleSpeed / 2 + particleSpeed * Math.random(),
    dy: - particleSpeed / 2 + particleSpeed * Math.random(),
    color: `rgb(
      ${genColor()},
      ${genColor()},
      ${genColor()}
    )`
  })

const drawPoint = point => {
    context.fillStyle = point.color;
    context.beginPath();
    context.arc(point.x, point.y, particleSize, 0, 2 * Math.PI);
    context.fill();
  }

const drawLines = (point, index) => {
    for (var i = 0; i < index; i++) {

var opacity = baseLineOpacity - checkDistance(
        point.x, point.y, points[i].x, points[i].y
      ) / maxLineDistance;

if (opacity > 0) {
        var grad = context.createLinearGradient(
          point.x, point.y, points[i].x, points[i].y
        );
        grad.addColorStop(0, point.color);
        grad.addColorStop(1, points[i].color);

context.strokeStyle = grad;
        context.globalAlpha = opacity;
        context.beginPath();
        context.moveTo(point.x, point.y);
        context.lineTo(points[i].x, points[i].y);
        context.stroke();
        context.globalAlpha = 1;
      }
    }
  }

const movePoint = () => {
    for (var i = 0; i < points.length; i++) {

var xDx = points[i].x + points[i].dx,
          yDy = points[i].y + points[i].dy;

if (xDx - particleSize < 0 || xDx + particleSize > stage.current.width) {
        points[i].dx = - points[i].dx;
      }

if (yDy - particleSize < 0 || yDy + particleSize > stage.current.height) {
        points[i].dy = - points[i].dy;
      }

points[i].x += points[i].dx;
      points[i].y += points[i].dy;

drawPoint(points[i]);
      drawLines(points[i], i);
    }
  }

const init = () => {
    stage.current.width = window.innerWidth;
    stage.current.height = window.innerHeight;

points.length = 0

for (var i = 0; i < particleCount; i++) {
      addPoint(stage.current.width * Math.random(), stage.current.height * Math.random());
    }
  }

const draw = () => {
    context.clearRect(0, 0, stage.current.width, stage.current.height);
    movePoint();
    window.requestAnimationFrame(draw);
 }

useEffect(() => {
    context = stage.current.getContext('2d');

window.addEventListener("resize", init);

stage.current.addEventListener("mouseup", function (e) {
      addPoint(e.pageX - stage.current.offsetLeft, e.pageY - stage.current.offsetTop);
    });

init()
    draw()
  })

return <canvas ref={stage} />
}

Soup.defaultProps = {
  baseLineOpacity: 1.5,
  maxLineDistance: 80,
  particleCount: 100,
  particleSize: 4,
  particleSpeed: 11,
}

const ParticleAccelerator = () => {
  const [particleCount, setParticleCount] = useState(Soup.defaultProps.particleCount)
  const [particleSize, setParticleSize] = useState(Soup.defaultProps.particleSize)
  const [particleSpeed, setParticleSpeed] = useState(Soup.defaultProps.particleSpeed)
  const [maxLineDistance, setMaxLineDistance] = useState(Soup.defaultProps.maxLineDistance)
  const [lineOpacity, setLineOpacity] = useState(Soup.defaultProps.baseLineOpacity)
  
  const sliderConfig = [
    { label: '# of particles', max: 100, min: 5, step: 1, defaultValue: particleCount, onChange: setParticleCount },
    { label: 'particle size', max: 10, min: 2, step: 1, defaultValue: particleSize, onChange: setParticleSize },
    { label: 'particle speed', max: 18, min: 3, step: 0.5, defaultValue: particleSpeed, onChange: setParticleSpeed },
    { label: 'max line size', max: 100, min: 40, step: 2, defaultValue: maxLineDistance, onChange: setMaxLineDistance },
    { label: 'line opacity', max: 3, min: 0.2, step: 0.1, defaultValue: lineOpacity, onChange: setLineOpacity },
  ]

const sliders = sliderConfig.map(({ label, max, min, defaultValue, step, onChange }) => (
    <div className="field" key={name}>
      <label for={name}>{label}</label>
      <input type="range" max={max} min={min} step={step} defaultValue={defaultValue} onChange={e => onChange(e.target.value)}/>
    </div> 
  ))

return (
    <Fragment>
      <Soup
        particleCount={particleCount}
        particleSize={particleSize}
        particleSpeed={particleSpeed}
        maxLineDistance={maxLineDistance}
        baseLineOpacity={lineOpacity}
      />
      <div id="eq">
        {sliders}
      </div>
    </Fragment>
  )
}

ReactDOM.render(<ParticleAccelerator />, document.getElementById('app'))

Frontend Forever App